﻿@{
    ViewBag.Title = "Create";
    Layout = "~/views/shared/_layout.cshtml";
}

<h2>knockoutJS验证</h2>
<a href="javascript:;" onclick="alertBox('fancybox')">fancybox</a>
<fieldset style="width: 100%;">
    <legend>添加商品</legend>

    <div class="formBox">
        <ul>
            <li><strong>账号：</strong><em>
                <input data-bind='value: name' />
                <span class="validationError" data-bind="validationMessage:name"></span>
                <span class="validationSuccess" data-bind="visible:name.isValid()">通过</span>
                <span class="validationWarn">请输入用户名账号，它由字母汉字数字组成</span></em></li>
            <li>

                <strong>Email：</strong>
                <em>
                    <input data-bind='value: Email' />
                    <span class="validationError" data-bind="validationMessage:Email"></span>
                    <span class="validationSuccess" data-bind="visible:Email.isValid()">通过</span>
                    <span class="validationWarn">请填写最常用的电子邮件地址</span>

                </em>
            </li>

            <li><strong>手机：</strong><em>
                <input data-bind='value: phone' />
                <span class="validationError" data-bind="validationMessage:phone"></span>
                <span class="validationSuccess" data-bind="visible:phone.isValid()"></span><span class="validationWarn">最常用的联系方式</span></em></li>

            <li><strong>年龄：</strong><em><input data-bind='value: age' />
                <span class="validationWarn">真实的年龄一般在0－100岁之间</span>
                <span class="validationError" data-bind="validationMessage:age"></span>
                <span class="validationSuccess" data-bind="visible:age.isValid()"></span></em></li>

            <li><strong>地址：</strong><em><input data-bind='value: address' />
                <span class="validationWarn">请输入真实的地址</span>
                <span class="validationError" data-bind="validationMessage:address"></span>
                <span class="validationSuccess" data-bind="visible:address.isValid()"></span></em></li>
            <li><strong>姓名：</strong><em>
                <input data-bind='value: realName' />
                <span class="validationWarn">姓名由英文字母组成</span>
                <span class="validationError" data-bind="validationMessage:realName"></span>
                <span class="validationSuccess" data-bind="visible:realName.isValid()"></span></em></li>
            <li><strong>身价：</strong><em>
                <input data-bind='value: peoplePrice' />
                <span class="validationWarn">由数字组成</span>
                <span class="validationError" data-bind="validationMessage:peoplePrice"></span>
                <span class="validationSuccess" data-bind="visible:peoplePrice.isValid()"></span></em></li>
            <li><strong>下拉选项：</strong><em>
                <select data-bind="options: availableCountries,
                           optionsText: 'countryName',
                           optionsValue: 'countryPopulation',
                           value:choseSelect,
                           optionsCaption: 'please choose'">
                </select></em></li>
            <li><strong>复选框：</strong><em>
                <!-- ko foreach: like -->
                <input type="checkbox" data-bind="value: itemValue, checked: $root.chosenlikes" />
                <span data-bind="text: itemName"></span>
                <!-- /ko -->
            </em></li>
            <li>
                <p>
                    <input type="button" value="Create" data-bind="click:Register" />
                </p>
            </li>
        </ul>
    </div>

</fieldset>
<style type="text/css">
    * {
        font-size: 12px;
        list-style-type: none;
    }

    div:after, ul:after, dl:after, li:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }



    .formBox ul li {
        padding: 0 0 20px;
        position: relative;
    }

        .formBox ul li strong {
            color: #343434;
            display: inline;
            float: left;
            font-size: 12px;
            font-weight: normal;
            height: 36px;
            line-height: 36px;
            margin: 0 6px 0 0;
            text-align: right;
            width: 63px;
        }

        .formBox ul li em {
            color: #333333;
            display: inline;
            float: left;
            height: 28px;
            margin: 0 6px 0 0;
            overflow: hidden;
            padding: 4px 13px 2px 11px;
        }

    .editor-label {
        border-bottom: #eee 1px solid;
        padding: 5px;
    }



    .validationWarn {
        color: gray;
        float: right;
        padding: 5px;
    }

    .validationSuccess {
        color: green;
        padding: 5px;
    }

        .validationSuccess:before {
            content: "√";
        }

    .validationError {
        color: red;
        font-weight: bold;
        padding: 5px;
    }

        .validationError:before {
            content: "×";
        }
</style>
<script type="text/ecmascript">

    var Product = function () {
        var self = this;
        ko.validation.configure({ insertMessages: false });
        self.isSelect = ko.observable(false);

        self.peoplePrice = ko.observable().extend({
            required: true,
            pattern: { params: /^\d+[\.]?\d{0,2}$/g, message: "必须是数字，并且最多两位小数！" }
        });

        self.peoplePrice.subscribe(function (newValue) {
            //  alert(self.peoplePrice.isValid());
        });

        self.name = ko.observable().extend({
            minLength: 2,
            maxLength: { params: 30, message: "名称最大长度为30个字符" },
            required: {
                params: true,
                message: "请输入名称",
            },

        });

        self.phone = ko.observable().extend({
            required: true,
            number: {
                params: true,
                message: "电话不合法",
            }
        });

        self.age = ko.observable().extend({
            required: true,
            number: {
                params: true,
                message: "必须是数字",
            },
            min: { params: 1, message: "年龄最小是１" },
            max: 200
        });

        self.Email = ko.observable().extend({

            required: {
                params: true,
                message: "请填写Email"
            },
            email: {
                params: true,
                message: "Email格式不正确"
            }
        });

        self.realName = ko.observable().extend({
            required: {
                params: true,
                message: "请填写realName"
            }
        });

        self.address = ko.observable().extend({
            required: {
                params: true,
                message: "请填写address"
            }
        });

        self.availableCountries = ko.observableArray([
            { countryName: "UK", countryPopulation: 1 },
            { countryName: "US", countryPopulation: 2 },
            { countryName: "CHS", countryPopulation: 3 }
        ]);
        self.choseSelect = ko.observable("1");//选中的项，它会监视前台进行onchange的变化


        self.like = ko.observableArray([
             { itemName: 'Music', itemValue: '1' },
             { itemName: 'IT', itemValue: '2' },
             { itemName: 'Sport', itemValue: '3' }
        ]),
        self.chosenlikes = ko.observableArray(["1", "3"])



        self.Register = function () {
            self.errors = ko.validation.group(self);
            if (self.isValid()) {
                var arr = "";
                for (var i in self.chosenlikes())
                    arr += i + ",";
                var json = {
                    name: self.name(),
                    address: self.address(),
                    realName: self.realName(),
                    like: arr,
                    availableCountries: self.choseSelect(),
                    Email: self.Email(),
                    phone: self.phone(),
                    age: self.age(),
                };

                $.ajax({
                    type: "POST",
                    url: "/home/CreateAjaxPost",
                    data: json,
                    success: function (data) {
                        alert(JSON.stringify(data.obj));
                    }
                });
            } else {

                self.errors.showAllMessages();
            }
        };
    }

    var prduct = new Product();
    ko.applyBindings(prduct);


</script>
